<!-- top navbar with question title -->
<nav class="navbar navbar-default navbar-fixed-top" av-affix-top=".navbar-unfixed-top" role="navigation">
  <div class="container">
    <div class="row avb-top-navbar">
      <div class="pull-left"
        ng-i18next="[html:i18next]({sprintf:['1','3']})avBooth.stepNumber">
      </div>
      <div class="pull-right">
        <span
          class="glyphicon glyphicon-question-sign"
          ng-click="launchHelp()">
        </span>
        <span ng-click="launchHelp()" ng-i18next="avBooth.helpTitle"></span>
        <span class="dropdown left-padding" av-change-lang>
      </div>
    </div>

  </div>
</nav>

<div class="wrapper-unfixed">
  <div class="navbar-unfixed-top text-center">
    <div class="container">
      <div class="hidden unfixed-top-height"></div>
      <h1>{{election.title}}</h1>
    </div>
  </div>
</div>

<div class="content avb-content">
  <div class="container">
    <div class="row options-row">
      <div class="col-xs-12">
        <h3>{{election.questions[0].title}}</h3>
      </div>
      <div class="col-xs-6">
        <div class="opt" ng-click="toggleOption(0, 0)">
          <span class="glyphicon"
            ng-class="{'glyphicon-unchecked': election.questions[0].answers[0].selected === -1,
                       'glyphicon-check': election.questions[0].answers[0].selected === 0}">
          </span>
          {{election.questions[0].answers[0].text}}
        </div>
      </div>
      <div class="col-xs-6 left-border">
        <div class="opt" ng-click="toggleOption(0, 1)">
          <span class="glyphicon"
            ng-class="{'glyphicon-unchecked': election.questions[0].answers[1].selected === -1,
                       'glyphicon-check': election.questions[0].answers[1].selected === 0}">
          </span>
          {{election.questions[0].answers[1].text}}
        </div>
        <div class="container-fluid" ng-if="election.questions.length > 1">
          <div class="row">
            <div class="col-xs-12">
              <h3>{{election.questions[1].title}}</h3>
            </div>
            <div class="col-xs-12 col-sm-{{12/election.questions[1].answers.length}}" ng-repeat="answer in election.questions[1].answers">
              <div class="opt" ng-click="toggleOption(1, $index)">
                <span class="glyphicon"
                  ng-class="{'glyphicon-unchecked': election.questions[1].answers[$index].selected === -1,
                            'glyphicon-check': election.questions[1].answers[$index].selected === 0}">
                </span>
                {{election.questions[1].answers[$index].text}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- next button -->
    <div class="row hidden" ng-cloak av-affix-bottom data-force-affix-width="768">
      <button
        class="btn btn-block btn-lg btn-success btn-plain"
        ng-i18next="avBooth.continueButton"
        ng-click="next()">
      </button>
    </div>
  </div>
</div>